<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>计算商品</h1>
      <p>商品的单价是 <input type="text" v-model="price" /></p>
      <p>商品的数量是 <input type="number" v-model="count" /></p>
      <!-- 使用计算属性的时候,不需要调用,直接拿属性名使用即可 -->
      <p>商品的总价格是 {{ getTotal }}</p>
      <p>商品的总价格是 {{ getTotal }}</p>
      <p>商品的总价格是 {{ getTotal }}</p>
      <p>商品的总价格是 {{ getTotal }}</p>
      <p>商品的总价格是 {{ getTotal }}</p>
      <p>商品的总价格是 {{ getTotal }}</p>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            price: 100,
            count: 1,
          };
        },

        /* 
          Vue中提供了一个 computed配置项，内部可以书写计算属性
          计算属性的值第一次计算以后会缓存起来，只有计算所依赖的数据发生改变的时候，才会重新计算
        */
        computed: {
          //计算属性可以写作一个函数,函数必须返回一个值,这个值就是计算属性的值
          getTotal() {
            console.log("计算");
            return "￥" + (this.price * this.count).toFixed(3);
          },
        },
      });
    </script>
  </body>
</html>
